<!--
 * @Author: licongwei
 * @Date: 2022-03-21 17:06:57
 * @Description: 流线动效
-->
<template>
  <div class="animate-line"></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'animateLine'
})
</script>
<style lang="less" scoped>
@lineW: 100px;
@pathW: 1120px;
@x1: @lineW / 2;
@x2: @lineW;
@x3: calc(~'@{pathW} - 3 * @{lineW}');
@x4: calc(~'@{pathW} - 2 * @{lineW}');
@keyframes lights {
  0%,
  100% {
    transform: translateX(@x1) scaleX(0.02);
    opacity: 0.1;
  }
  10%,
  90% {
    transform: scaleX(1) translateX(@x2);
    opacity: 1;
    filter: brightness(2);
  }
  40%,
  60% {
    transform: scaleX(1) translateX(@x3);
    transform-origin: right;
    opacity: 1;
    filter: brightness(2);
  }
  50% {
    transform: translateX(@x4) scaleX(0.02);
    transform-origin: right;
    opacity: 0.1;
  }
}
.animate-line {
  position: absolute;
  top: 84px;
  left: 435px;
  width: @lineW;
  height: 5px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #399df5 50%,
    transparent 100%
  );
  filter: brightness(1.1);
  animation: lights 6s cubic-bezier(0.05, 0.25, 0.95, 1) infinite;
}
</style>
